My html:
<label for="answer_1" class="answer_label"><input type="radio" id="answer_1">Answer</label>
<label for="answer_2" class="answer_label"><input type="radio" id="answer_2">Answer</label>
<label for="answer_3" class="answer_label"><input type="radio" id="answer_3">Answer</label>
My JS:
var answers = ["Answer_1","Answer_2","Answer_3"];
var answer_labels = document.querySelectorAll(".answer_label");
for (var i = 0; i < answers.length; i++){
answer_labels[i].innerText = answers[i]
}
When I want to set text to my labels, I get error:
Uncaught TypeError: Cannot set properties of undefined (setting 'innerText')
You have a syntax error in the for loop.
change for (var i = 0; i < .length; i++)
to for (var i = 0; i < answer_labels.length; i++)
var answers = ["Answer_1","Answer_2","Answer_3"]
var answer_labels = document.querySelectorAll(".answer_label");
for (var i = 0; i < answer_labels.length; i++){
answer_labels[i].innerText = answers[i];
} <label for="answer_1" class="answer_label"><input type="radio" name="choice" id="answer_1">Answer</label>
<label for="answer_2" class="answer_label"><input type="radio" name="choice" id="answer_2">Answer</label>
<label for="answer_3" class="answer_label"><input type="radio" name="choice" id="answer_3">Answer</label>If you just want to replace the labels without destroying the radio button inputs inside you should maybe do something like this:
var answers = ["Answer_1","Answer_2","Answer_3"]
document.querySelectorAll(".answer_label").forEach((l,i)=>{
l.innerHTML=l.querySelector("input").outerHTML+answers[i];
})<label for="answer_1" class="answer_label"><input type="radio" name="choice" id="answer_1">Answer</label>
<label for="answer_2" class="answer_label"><input type="radio" name="choice" id="answer_2">Answer</label>
<label for="answer_3" class="answer_label"><input type="radio" name="choice" id="answer_3">Answer</label>the problem was that I did not specify "<!DOCTYPE html>" in html file...